@extends('admin.layout.base')
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-info">
            <el-form :model="form" ref="form" class="form" label-width="100px">
                <div class="panel-header"> <div class="panel-title"> 订单信息 </div> </div>
                <div class="panel-main">
                    <el-form-item label="订单号：" prop="order_sn">
                        <el-input clearable v-model="form.order_sn" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="买家：" prop="user_name">
                        <el-input clearable v-model="form.user_name" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="商铺：" prop="store_name">
                        <el-input clearable v-model="form.store_name" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="订单状态：" prop="order_state_text">
                        <el-input clearable v-model="form.order_state_text" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="订单总数：" prop="goods_number">
                        <el-input clearable v-model="form.order_number" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="订单金额：" prop="order_price">
                        <el-input clearable v-model="form.order_price" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="支付金额：" prop="pay_price">
                        <el-input clearable v-model="form.pay_price" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="运费：" prop="shipping_price">
                        <el-input clearable v-model="form.shipping_price" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="支付方式：" prop="pay_method">
                        <el-input clearable v-model="form.pay_method" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="支付时间：" prop="pay_time">
                        <el-input clearable v-model="form.pay_time" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="下单时间：" prop="created_at">
                        <el-input clearable v-model="form.created_at" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item v-if="form.message != null" label="买家留言：" prop="message">
                        <el-input clearable v-model="form.message" readonly="readonly"></el-input>
                    </el-form-item>
                </div>

                <div class="panel-header"> <div class="panel-title"> 发货信息 </div> </div>
                <div class="panel-main">
                    <el-form-item label="发货状态：" prop="shipping_status_text">
                        <el-input clearable v-model="form.shipping_status_text" readonly="readonly"></el-input>
                    </el-form-item>
                    {{--<div v-if="form.shipping_status == '已发货'">--}}
                        <el-form-item label="物流公司：" prop="shipping_code">
                            <el-input clearable v-model="form.shipping_code" ></el-input>
                        </el-form-item>
                        <el-form-item label="物流单号：" prop="shipping_sn">
                            <el-input clearable style="width: 50%;" v-model="form.shipping_sn" ></el-input>
                            <el-button @click="delivery({{$id}})" v-if="{{$info}}['pay_status'] == 2 && {{$info}}['shipping_status'] == 1">发货</el-button>
                        </el-form-item>
                        <el-form-item label="发货时间：" prop="order_time">
                            <el-input clearable v-model="form.order_time" readonly="readonly"></el-input>
                        </el-form-item>
                    {{--</div>--}}
                </div>

                <div class="panel-header"> <div class="panel-title"> 收货信息 </div> </div>
                <div class="panel-main">
                    <el-form-item label="收货人：" prop="realname">
                        <el-input clearable v-model="form.realname" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话：" prop="phone">
                        <el-input clearable v-model="form.phone" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="区域地址：" prop="area">
                        <el-input clearable v-model="form.area" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="详细地址：" prop="detail">
                        <el-input clearable v-model="form.detail" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="收货状态：" prop="order_status">
                        <el-input clearable v-model="form.order_status" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item v-if="form.order_state == 5" label="收货时间：" prop="order_time">
                        <el-input clearable v-model="form.order_time" readonly="readonly"></el-input>
                    </el-form-item>
                </div>

                <div class="panel-header"> <div class="panel-title"> 商品信息 </div> </div>
                <div class="panel-main">
                    <el-form-item label="订单商品：" prop="address_info">
                        <template>
                            <el-table :data="goodsData" style="width: 100%">
                                <el-table-column align="center" prop="goods_name" label="商品名称" width="250"></el-table-column>
                                <el-table-column align="center" prop="goods_image" label="商品图片" width="130">
                                    <template slot-scope="scope">
                                        <el-popover placement="right" trigger="click">
                                            <img :src="scope.row.goods_image" style="width: 550px;height: auto"/>
                                            <el-button slot="reference"
                                                       style="border: none;height: 50px;padding: 0;overflow: hidden">
                                                <img title="点击查看原图" alt="点击查看原图" :src="scope.row.goods_image"
                                                     style="height: 50px;width: 100px"/>
                                            </el-button>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" prop="goods_price" label="价格"></el-table-column>
                                <el-table-column align="center" prop="goods_num" label="购买数量"></el-table-column>
                                <el-table-column align="center" prop="goods_type" label="类型"></el-table-column>
                                <el-table-column align="center" prop="recommend_goods" label="热销"></el-table-column>
                            </el-table>
                        </template>
                    </el-form-item>
                </div>

                <el-form-item style="padding-left: 150px;margin-top: 50px">
                    <el-button @click="back()" style="margin-left: 50px">返 回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('neditor/neditor.config.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.all.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/neditor.service.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/i18n/zh-cn/zh-cn.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/browser-md5-file.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('neditor/third-party/jquery-1.10.2.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        $(function () {
            let app = new Vue({
                el: '#app',
                data: function () {
                    return {
                        info: {!! $info !!},
                        form: {
                            id: " {{ $id }}",
                            order_sn: '',
                            user_name: '',
                            store_name: '',
                            order_price: 0.00,
                            order_number: 0,
                            goods: '',
                            pay_status: 0,
                            pat_status_text:'',
                            pay_method: '',
                            pay_price: 0.00,
                            pay_time:'',
                            shipping_status: 0,
                            shipping_status_text: '',
                            shipping_code: '',
                            shipping_price: 0.00,
                            shipping_time: '',
                            order_status: 0,
                            order_time: '',
                            created_at: '',
                            order_state: '',
                            order_state_text: '',
                            shipping_code: '',
                            shipping_sn: '',
                            message: '',
                            track_sn: '',
                        },
                        goodsData:[],
                    }
                },
                created() {
                    let that = this;
                    if (this.form.id > 0) {
                        this.form = {
                            id: this.info.id,
                            order_sn: this.info.order_sn,
                            user_name: this.info.user_name,
                            store_name: this.info.store_name,
                            order_price: this.info.order_price,
                            order_number: this.info.order_number,
                            pay_status: this.info.pay_status,
                            pay_status_text: this.info.pay_status_text,
                            pay_method: this.info.pay_method,
                            pay_price: this.info.pay_price,
                            pay_time: this.info.pay_time,
                            shipping_status: this.info.shipping_status,
                            shipping_status_text: this.info.shipping_status_text,
                            shipping_code: this.info.shipping_code,
                            shipping_time: this.info.shipping_time,
                            shipping_price: this.info.shipping_price,
                            order_status: this.info.order_status,
                            order_status_text: this.info.order_status_text,
                            order_time: this.info.order_time,
                            created_at: this.info.created_at,
                            goods: this.info.goods,
                            order_state: this.info.order_state,
                            order_state_text: this.info.order_state_text,
                            shipping_code: this.info.shipping_code,
                            shipping_sn: this.info.shipping_sn,
                            message: this.info.message,
                            realname:this.info.address.realname,
                            phone:this.info.address.phone,
                            area:this.info.address.area,
                            detail:this.info.address.detail,
                            track_sn: this.info.track_sn,
                        };
                    }
                    this.info.goods.map(item=>{
                        this.goodsData.push({
                            goods_name:item.goods_name,
                            goods_image:item.goods_image,
                            goods_price:item.goods_price,
                            goods_num:item.goods_num,
                            goods_type:item.goods_type,
                            recommend_goods:item.recommend_goods,
                        })
                    })
                },
                methods: {
                    //返回
                    back() {
                        window.history.go(-1);
                    },
                    //发货
                    delivery(id){
                        let that = this;
                        if(this.form.pay_status != 2){
                            that.$message.error('请先确认支付后再发货！')
                        }
                        if(this.form.shipping_status == 2){
                            that.$message.error('无须重复操作！')
                        }
                        if(this.form.shipping_sn.length <= 0){
                            that.$message.error('请填写物流单号！')
                        }
                        if(this.form.shipping_code.length <= 0){
                            that.$message.error('请填写配送方式！')
                        }
                        if(this.form.realname.length <= 0){
                            that.$message.error('请确认收货联系人！')
                        }
                        if(this.form.phone.length <= 0){
                            that.$message.error('请确认收货联系电话！')
                        }
                        if(this.form.area.length <= 0){
                            that.$message.error('请确认收货联系地址！')
                        }
                        $.post("{{ route('admin.order.delivery') }}",{id:id,shipping_sn:that.form.shipping_sn,shipping_code:that.form.shipping_code, _token: "{{csrf_token()}}"},function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.form.shipping_time = res.data;
                                that.form.shipping_status = 2;
                                that.form.shipping_status_text = '已发货';
                                that.$message.success('操作成功！');
                            }
                        },'JSON');

                    },

                }
            });
        })
    </script>
@endsection
